<%@page import="cn.util.Const"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>宠物用品管理系统</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="<%=Const.ROOT %>assets/images/favicon.png"/>
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/animate.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/jquery-ui.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/slick.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/chosen.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/lightbox.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/mobile-menu.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/style.css">
</head>
<body class="productsgrid-page">
<%@include file="inc/header.jsp" %>
<!--移动端end-->
<div class="main-content main-content-product no-sidebar">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-trail breadcrumbs">
                    <ul class="trail-items breadcrumb">
                        <li class="trail-item trail-begin">
                            <a href="<%=Const.ROOT %>index">首页</a>
                        </li>
                        <li class="trail-item trail-end active">
                            <a href="<%=Const.ROOT %>message?action=query">留言</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="content-area shop-grid-content full-width col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="site-main">
                    <div class="banner-shop banner-slider owl-slick equal-container"
                         data-slick='{"autoplay":true, "autoplaySpeed":10000, "arrows":false, "dots":true, "infinite":true, "speed":800, "rows":1}'>
                        <c:forEach items="${sessionScope.kindList }" var="kind">
	                        <div class="item-banner style1">
	                            <div class="inner equal-element" style="background-image:url('<%=Const.ROOT %>images/${kind.pic }')">
	                                <div class="banner-content style1">
	                                    <h3 class="title">${kind.name }</h3>
	                                    <button class="button button-now" type="button" onclick="location='<%=Const.ROOT %>index?kid=${kind.id }'">查看</button>
	                                </div>
	                            </div>
	                        </div>
                        </c:forEach>
                    </div>
                    <h3 class="custom_blog_title">
                        商品列表
                    </h3>
                    <div class="shop-top-control">
                        <form class="select-item select-form">
                            <span class="title">商品分类</span>
                            <select name="kid" data-placeholder="商品分类" class="chosen-select" onchange="location='<%=Const.ROOT %>index?kid='+this.value">
                                <option value="">全部</option>
                                <c:forEach items="${sessionScope.kindList }" var="kind">
                                	<option value="${kind.id }">${kind.name }</option>
                                </c:forEach>
                            </select>
                        </form>
                    </div>
                    <ul class="row list-products auto-clear equal-container product-grid">
                        <c:forEach items="${pageInfo.list }" var="v">
                         <li class="product-item  col-lg-3 col-md-4 col-sm-6 col-xs-6 col-ts-12 style-1">
                            <div class="product-inner equal-element">
                                <div class="product-thumb">
                                    <div class="thumb-inner">
                                        <a href="<%=Const.ROOT%>goods?action=detail&id=${v.id}">
                                            <img src="<%=Const.ROOT %>images/${v.pic}" alt="img" style="min-width:100%;height:280px">
                                        </a>
                                    </div>
                                </div>
                                <div class="product-info">
                                    <h5 class="product-name product_title">
                                        <a href="<%=Const.ROOT%>goods?action=detail&id=${v.id}">${v.name}</a>
                                    </h5>
                                    <div class="group-info">
                                        <div class="price">
                                          	￥${v.price}元
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        </c:forEach>
					</ul>
                    <div class="pagination clearfix style2">
                        <div class="nav-link">
                            <a href="<%=Const.ROOT %>index?pageNo=${pageInfo.prePage }" class="page-numbers"><i class="icon fa fa-angle-left"
                                                                aria-hidden="true"></i></a>
                            <a href="<%=Const.ROOT %>index?pageNo=${pageInfo.nextPage }" class="page-numbers"><i class="icon fa fa-angle-right"
                                                                aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="inc/footer.jsp" %>

<script src="<%=Const.ROOT %>assets/js/jquery-1.12.4.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.plugin-countdown.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery-countdown.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/bootstrap.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/owl.carousel.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/magnific-popup.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/isotope.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.scrollbar.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery-ui.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/mobile-menu.js"></script>
<script src="<%=Const.ROOT %>assets/js/chosen.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/slick.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.elevateZoom.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.actual.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/fancybox/source/jquery.fancybox.js"></script>
<script src="<%=Const.ROOT %>assets/js/lightbox.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/owl.thumbs.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.scrollbar.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/frontend-plugin.js"></script>

</body>
</html>